<!-- 个人账户 -->
<template>
	<view class="hdtybox" :class="hdc">
		<topboxVue :tit="$t('hd.bt8')"></topboxVue>
		<view class="zhbox">
			<view class="bj_between mb20">
				<view class="zhbox-zhchi" :class="item.ch ? 'zhbox-zhchich' : ''" v-for="(item,i) in chlist"
					@click="chi(i)">
					{{item.name}}
				</view>
			</view>

			<zh1pVue v-if="chlist[0].ch"></zh1pVue>
			<zh2pVue v-if="chlist[1].ch"></zh2pVue>
			<zh3pVue v-if="chlist[2].ch"></zh3pVue>

		</view>
		<bottomVue></bottomVue>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		provide
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"
	import topboxVue from '../common/topbox.vue';
	import useI18n from '@/store/useI18n.js'
	import bottomVue from "../common/bottom-slotsbr.vue";
	import common from '../../js/common';
	import zh1pVue from './zh1p.vue';
	import zh2pVue from './zh2p.vue';
	import zh3pVue from './zh3p.vue';
	const {
		t
	} = useI18n()
	provide("repage", repage);
	// 父级关闭活动的方法
	const clhd = inject("clhd");
	let hdc = ref("hdpagein")

	const props = defineProps({
		tag: {
			type: Number,
			default: 0
		}
	});

	let chlist = ref([{
			name: t("zh.ch1"),
			ch: false
		},
		{
			name: t("zh.ch2"),
			ch: false
		},
		{
			name: t("zh.ch3"),
			ch: false
		}
	])

	onShow(function() {
		chi(props.tag)
	})

	function chi(v) {
		for (var i = 0; i < chlist.value.length; i++) {
			chlist.value[i].ch = false
		}
		chlist.value[v].ch = true
	}

	function repage() {
		hdc.value = "hdpageout";
		clhd();
	}
</script>

<style scoped lang="scss">
	.zhbox {
		padding: 20rpx;

		&-zhchi {
			width: 33.33%;
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
			background: #001F0A;
			color: #A2B5D5;
		}

		&-zhchich {
			background: #098B34;
			color: #FFFFFF;
		}

		&-zhchi:first-child {
			border-radius: 12rpx 0rpx 0rpx 12rpx;
		}

		&-zhchi:last-child {
			border-radius: 0rpx 12rpx 12rpx 0rpx;
		}
	}
</style>